<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .form-item{
        margin: 20px 0;
    }
    textarea{
        /* horizontal:水平 vertical:垂直 both:全部*/
        /* resize: vertical;  */
    }
</style>
<body>
    <!-- 行内替换元素 -->
    <!-- disabled 禁用  readonly 只读 -->
    <div class="form-item">
        <label for="shuru">
            输入框
            <input id="shuru" type="text">
        </label>
    </div>
    <!-- 在类型为radio的input中，如果name一样，那么两个radio就会互斥  -->
    <div class="form-item">
        <label for="password">
            密码
            <input id="password" type="password">
        </label>
    </div>
    <div class="form-item">
        <label for="male">
            男
            <input id="male" name="sex" type="radio" value="male">
        </label>
        <label for="female">
            女
            <input id="female" name="sex" type="radio" value="female">
        </label>
    </div>
    <div class="form-item">
        您喜欢什么?
        <label for="lyf">
            刘亦菲
            <input id="lyf" name="lover" type="checkbox">
        </label>
        <label for="fbb">
            范冰冰
            <input id="fbb"  name="lover" type="checkbox" value="male">
        </label>
        <label for="zly">
            赵丽颖
            <input id="zly"  name="lover" type="checkbox" value="female">
        </label>
    </div>
    <div class="form-item">
        <label for="date">
            日期
            <input id="date" type="date">
        </label>
    </div>
    <div class="form-item">
       <span>按钮</span> <input type="button">
    </div>
    <div class="form-item">
       <span>重置</span> <input type="reset">
    </div>
    <div class="form-item">
       <span>提交</span> <input type="submit" value="提交">
    </div>
    <div class="form-item">
       <span>文件上传</span> <input type="file">
    </div>

    <div style="border-top:1px solid red"></div>
    <div>
        <form action="/abc">
            <label for="male">
                男
                <input id="male" name="sex" type="radio" value="male">
            </label>
            <label for="female">
                女
                <input id="female" name="sex" type="radio" value="female">
            </label>
            <input type="button" value="普通按钮">
            <!-- 两种按钮写法 -->
            <button type="reset">重置按钮</button>
            <input type="reset" value="重置按钮">
            <input type="submit" value="提交按钮">
        </form>
    </div>
    <div>
        <form action="" method="" target="_blank">
            <label for="info">
            个人描述:
            <textarea name="info" id ="info" cols="30" rows="10"></textarea></labe1>
            </form>
    </div>
    <div>
        <select name="fruits" id="fr" multiple>
            <option value="apple" >苹果</option>
            <option value="banana" >香焦</option>
            <option value="orange">桥子</option>
        </select>
    </div>
</body>
</html> 